<template>
	<div class="page-wraper">
		<layout-base :loading="showLoading">
			<crumb title="课程列表" :routes="crumb"></crumb>
			<pannel>
				<span class="iconfont btn gradient-primary mb-20" @click="courseType = 'add'; showAddModal = true">&#xe6e0; 创建课程</span>
				<z-table>
					<thead>
						<tr>
							<th>课程</th>
							<th>创建时间</th>
							<th>在学人数</th>
							<th>课程状态</th>
							<th width="140" style="text-align: right;">操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(v,i) in course" :key="i">
							<td><div class="line-1">{{v.name}}</div></td>
							<td>{{v.createTime}}</td>
							<td>{{v.learn}}</td>
							<td><span :class="['status', 'bg-'+mapStatusStyle[v.status]]">{{mapStatus[v.status]}}</span></td>
							<td>
								<div class="flex jc-end">
									<span class="iconfont status bg-info mr-10 pointer" title="编辑" @click="onEdit(i)">&#xe6e5;</span>
									<span class="iconfont status bg-danger pointer" title="删除" @click="onDel(i)">&#xe6f7;</span>
								</div>
							</td>
						</tr>
					</tbody>
				</z-table>
				<pages :total="50" @change="onPageChange"></pages>
			</pannel>
		</layout-base>
		<addcourse-modal
			v-model="showAddModal"
			@confirm="onAddCourse"
			:name="courseName"
			:status="courseStatus"
			:type="courseType"
		>
		</addcourse-modal>
	</div>
</template>

<script>
	import addCourseModal from './add-course-modal'
	export default{
		components: {
			'addcourse-modal': addCourseModal
		},
		data(){
			return{
				showLoading: false,
				//添加或修改课程
				showAddModal: false,
				courseName: '',
				courseStatus: 'updating',
				courseType: 'add',
				currentEdit: null,
				//面包屑导航
				crumb:[
					{label:'我的课程'}
				],
				//课程列表
				course:[
					{name:'Photoshop', createTime:'2019-06-30', learn:23, status:'completed'},
					{name:'Illustrator', createTime:'2019-06-30', learn:23, status:'updating'}
				],
				mapStatus:{
					'completed':'已完结',
					'updating':'更新中',
					'pause':'暂停更新'
				},
				mapStatusStyle:{
					'completed':'success',
					'updating':'warning',
					'pause':'danger'
				}
			}
		},
		methods:{
			//分页
			onPageChange(e){
				console.log(e)
				this.showLoading = true
				setTimeout(()=>{
					this.showLoading = false
				}, 1000)
			},
			//创建或修改课程
			onAddCourse(data){
				//判断时创建还是修改
				if(data.type==='add'){
					this.course.unshift(Object.assign({createTime:'刚刚', learn:0}, data))
				}else{
					this.courseType = 'add'
					this.course[this.currentEdit] = Object.assign(this.course[this.currentEdit], {name:data.name, status:data.status})
				}
				this.showAddModal = false
			},
			onDel(i){
				this.$Confirm({
					title: `确认删除 [${this.course[i].name}] 课程吗`,
					content: '课程将被删除且无法恢复，请谨慎操作！',
					onConfirm(){
						console.log(i)
					}
				})
			},
			//弹出修改课程
			onEdit(i){
				this.currentEdit = i
				this.courseType = 'edit'
				this.courseName = this.course[i].name
				this.courseStatus = this.course[i].status
				this.showAddModal = true
			}
		}
	}
</script>

<style lang="scss">
</style>
